<template>
	<view class="help-list">
		<view class="back">
			<view class="back-circle" @click="back()">
				<text class="iconfont icon-left"></text>
			</view>
		</view>
		<view class="map-list">
			<map class="map-info" :latitude="latitude" :longitude="longitude" :markers="markers"
			:scale="14" controls show-location></map>
		</view>
		<!-- <view class="poi-type">
				<sun-tab @change="tabChange" :value.sync="index" scroll rangeKey="name" :tabList="tabList"></sun-tab>
		
			
		</view> -->
		<view class="poi-list">
			<block v-for="(item,index) in poiList" :key="index">
				<view class="poi-info">
					<!-- <view class="poi-img">
						<image :src="item.listImage"></image>
					</view> -->
					<view class="poi-msg">
						<view class="title">
							<text>{{item.title}}</text>
						</view>
						<view class="address">
							<text>{{item.address}}</text>
						</view>
						<!-- <view class="phone">
							<text>{{item.phone}}</text>
						</view> -->
					</view>
					<!-- <view class="phone-call" @click="phoneCall(item)">
						<view class="phone-circle">
							<text class="iconfont icon-phone-fill"></text>
						</view>
					</view> -->
				</view>
				<view class="br"></view>
			</block>
			
		</view>
	</view>
</template>

<script>
	import amap from '../../common/js/amap-wx.js'
	import sunTab from '@/components/sun-tab/sun-tab.vue'
	export default {
		components:{
			sunTab
		},
		data() {
			return {
				poiTypeId:'',
				index: 0,
				//高德key
				key:'b56e180ab79c37ab0452a550917e74fc',
				latitude: "",
				amap:'',
				longitude:"" ,
				markers:[
					
				],
				address:'',
				poiType:'',
				tabList:[],
				poiList:[]
			};
		},
		onLoad:function(option){
			this.amap = new amap.AMapWX({
				key:this.key
			})
			this.poiTypeId = option.id
			console.log(option)
			this.getLocation()
			this.getPOIType()
		},
		methods:{
			back:function(){
				uni.navigateBack({
				
				})
			},
			//拨打电话
			phoneCall:function(item){
				console.log(item)
				let obj = item 
				let number = obj.phone.toString().replace('-','')
				console.log("号码：",number)
				uni.makePhoneCall({
					phoneNumber:number
				})
// 				uni.showModal({
// 					title: '提示',
// 					content: '拨打' + obj.phone,
// 					success: res=>{
// 
// 					}
// 				})
			},
			tabChange:function(e){
				console.log(e)
				let item = e.tab
				this.poiType = item.id
				this.getPOIList()
			},
			getLocation:function(){
		
				this.amap.getRegeo({
					success:data=>{
						console.log("高德返回--------->",data[0])
						let result = data[0]
						this.latitude = result.latitude
						this.longitude = result.longitude
						
						this.address = result.regeocodeData
						console.log("地址信息----------->",this.address)
						this.getPOIList()
					}
				})

				
			},
			//获取周边poi列表
			getPOIList:function(){
				this.markers = []
				let params = {
					pageIndex:'1',
					pageSize:'10',
					city: this.address.addressComponent.city,
					poiTypeId:this.poiTypeId
				}
				this.$postApi(this.$path.GET_POI_LIST,params).then(res => {
					console.log("poi列表返回数据------------->",res.data)
					//处理poi列表中经纬度集合绑定至地图
					let list = res.data.data.list
					let locationlist = []
					list.forEach(item => {
						item.degree = JSON.parse(item.degree)
						item.degree.forEach(location => {
							if(location.type == "tengxun"){
								locationlist.push({
									latitude: location.latitude,
									longitude:location.longitude,
									iconPath:'../../static/img/location.png',
									callout:{
										content:item.title,
										borderRadius:12,
										padding:10,
										textAlign:'center'
									}
								})
							}
						})
						
					})
					this.poiList = list
					this.markers = this.markers.concat(locationlist)
					console.log("locationlist------------------>",this.markers)
				})
			},
			//获取poi分类
			getPOIType:function(){
				let params = {}
				this.$postApi(this.$path.GET_POI_TYPE,params).then(res => {
					console.log("poi分类返回数据------------->",res.data)
					let list = res.data.data.list
					let temp = []
					list.forEach(item => {
						temp.push(
							{
								name:item.name,
								id:item.code
							}
						)
					})
					this.tabList = temp					
					this.poiType = this.tabList[0].id
				})
			}
		}
	}
</script>

<style lang="scss">
	.br{
		width: 100%;
		height: 2upx;
		background: #f7f7f7;
	}
	.help-list{
		min-height: 100%;
		font-size: 32upx;
		background: #F2F2F2;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.back{
		position: fixed;
		top:65upx;
		left: 25upx;
		z-index:99999;
		.back-circle{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			background: #fff;
			width: 60upx;
			height: 60upx;
		}
	}
	.map-info{
		width: 100%;
		height: 600upx;
	}
	.poi-list{
		padding: 30upx;
		background: #fff;
	}
	.poi-info{
		height: 160upx;
		display: flex;
		.poi-img{
			width: 35%;
			padding: 30upx;
		}
		.poi-msg{
			// font-size: ;
			padding: 20upx 0;
			// width: 56%;
			flex-direction: column;
			justify-content: space-around;
			display:flex;
			
			.title{
				font-size: 34upx;
				font-weight: bold;
				overflow:hidden;
				text-overflow:ellipsis;
				white-space:nowrap;
				text{
					
				}
			}
			.address{
				font-size: 28upx;
				color: #aaa;
			}
			.phone{
				font-size: 28upx;
				color: #aaa;
			}
			
		}
		.phone-call{
			display: flex;
			justify-content: center;
			align-items: center;
			
			.phone-circle{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				border: 1upx solid #0092FF;
				
				text{
					font-size: 36upx;
					color: #0092FF;
				}
			}
		}
	}
</style>
